<template>
    <transition name="confirm-box-fade">
        <div
            class="confirm-wrapper"
            v-show="visible"
        >
            <div
                class="confirm-box"
                ref="confirmBox"
            >
                <div
                    class="close-view"
                    v-show="showClose"
                >
                    <i
                        class="el-icon-close"
                        @click="close()"
                    />
                </div>
                <div class="confirm-icon">
                    <i
                        :class="iconTypeFilter(type).className"
                        :style="{color: iconTypeFilter(type).color}"
                    />
                </div>
                <div class="confirm-title">
                    {{ title }}
                </div>
                <div class="content-message">
                    {{ message }}
                </div>
                <div
                    class="footer-button"
                    v-if="hasCancelButton"
                >
                    <el-button
                        size="medium"
                        style="width: 120px"
                        @click="handleCancel"
                    >
                        {{ cancelButtonText }}
                    </el-button>
                    <el-button
                        type="primary"
                        size="medium"
                        style="width: 120px"
                        @click="handleConfirm"
                    >
                        {{ confirmButtonText }}
                    </el-button>
                </div>
                <div
                    class="footer-button"
                    style="justify-content: center"
                    v-else
                >
                    <el-button
                        type="primary"
                        size="medium"
                        style="width: 212px;"
                        @click="handleConfirm"
                    >
                        {{ confirmButtonText }}
                    </el-button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
/**
 * ZdConfirm 确认弹窗组件
 *
 * @description 自定义element MessageBox组件
 * @author liyujie
 * @date 2021/06/17
 * @param title - 标题
 * @param message - 提示信息
 * @param type - 类型 warning success error info
 * @param confirmButtonText - 确认按钮文本
 * @param cancelButtonText - 取消按钮文本
 * @param hasCancelButton - 是否有取消按钮
 */
export default {
    name: 'ZdConfirm',
    data() {
        return {
            // 标题（默认 提示）
            title: '提示',
            // 提示文本
            message: '',
            // 类型 默认warning
            type: 'warning',
            // 确认按钮文本
            confirmButtonText: '确定',
            // 取消按钮文本
            cancelButtonText: '取消',
            // 显示或隐藏
            visible: false,
            // 是否有取消按钮
            hasCancelButton: true,
            // 是否显示关闭按钮
            showClose: false
        };
    },
    methods: {

        /**
         * @description: 移出
         */
        close() {
            this.visible = false;
            setTimeout(() => {
                this.$el.parentNode.removeChild(this.$el);
            }, 300);
        },


        /**
         * @description: 确定
         */
        handleConfirm() {
            this.close();
            this.callback('confirm');
        },


        /**
         * @description: 取消
         */
        handleCancel() {
            this.close();
            this.callback('cancel');
        },

        /**
         * 图标类型
         * @param val
         * @returns {string|{color: string, className: string}}
         */
        iconTypeFilter(val) {
            switch (val) {
                case 'warning':
                    return {
                        className: 'el-icon-warning',
                        color: '#FFBB01'
                    };
                case 'success':
                    return {
                        className: 'el-icon-success',
                        color: '#67C23A'
                    };
                case 'error':
                    return {
                        className: 'el-icon-error',
                        color: '#F56C6C'
                    };
                case 'info':
                    return {
                        className: 'el-icon-info',
                        color: '#409EFF'
                    };
                case 'danger-warning':
                    return {
                        className: 'el-icon-warning',
                        color: '#F95B56'
                    };
                default:
                    return 'el-icon-warning';
            }
        }
    },
};
</script>

<style lang="less" scoped>
.confirm-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    .confirm-box {
        width: 360px;
        min-height: 238px;
        padding: 32px;
        background: #FFFFFF;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        text-align: left;
        overflow: hidden;
        backface-visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .close-view {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 0;
            border: none;
            outline: none;
            background: transparent;
            font-size: 16px;
            cursor: pointer;
            &:hover {
                color: #409eff;
                transition: all .2s;
            }
        }
        .confirm-icon {
            font-size: 48px;
        }
        .confirm-title {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-top: 16px;
        }
        .content-message {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 16px;
            text-align: center;
            line-height: 20px;
        }
        .footer-button {
            display: flex;
            justify-content: space-between;
            margin-top: 28px;
            width: 100%;
            padding: 0 12px;
        }
    }
}
</style>
<style lang="less" scoped>
.confirm-box-fade-enter-active {
    -webkit-animation: confirm-box-fade-in 0.3s;
    animation: confirm-box-fade-in 0.3s;
}
.confirm-box-fade-leave-active {
    -webkit-animation: confirm-box-fade-out 0.3s;
    animation: confirm-box-fade-out 0.3s;
}
@keyframes confirm-box-fade-in {
    0% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@keyframes confirm-box-fade-out {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -20px, 0);
        opacity: 0;
    }
}
</style>
